<template>
	<view class="search-container">
		<view class="search">
			<!-- <search  @search="searchIron" :disabled="btnDisable"/> -->
			<view class="the-search">
				<input class="search-input" v-model="ironName" placeholder="搜索钢材"></input>
				<button class="search-btn" @click="searchIron">搜索</button>
				<image src="https://zzes-1251916954.cos.ap-shanghai.myqcloud.com/wave.gif" class="wave-gif" mode=""></image>
			</view>
		</view>
		<view class="content">
			<view class="hot">
				<view class="title">历史搜索</view>
				<view class="history">
					<view class="history-item" v-for="(v, i) in hotName" :key="i" @click="goToDetails(v)">{{v}}</view>
				</view>
			</view>
			<view class="list">
				<scroll-view scroll-y style="height: 400px;">
					<view v-for="(v, i) in listData" :key="i" class="list-item" @click="goToDetails(v.name)">{{v.name}}</view>
				</scroll-view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view @longpress="startRecord" @touchend="stopRecord" class="voice-block" hover-class="voice-block-hover">
				<view class="voice-icon">
				</view>
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
import Search from '../../components/search.vue'
import { searchFind, checkText } from '../../api/api.js'
export default {
	name: 'searchContainer',
	components:{
		Search
	},
	data() {
		return {
			hotName: [],
			ironName: '',
			listData: [],
			manager: null
		}
	},
	mounted() {
		let hot = uni.getStorageSync('hot')
		if(hot) {
			this.hotName = [...new Set(JSON.parse(hot))]
			
		}
		this.getIronData()
		// #ifdef MP-WEIXIN
		this.recognizeVoice()
		// #endif
	},
	methods: {
		// #ifdef MP-WEIXIN
		recognizeVoice () {
			const plugin = requirePlugin("WechatSI")
			this.manager = plugin.getRecordRecognitionManager()
			this.manager.onRecognize = function(res) {
				console.log("current result", res.result)
			}
			this.manager.onStart = (res) => {
				uni.showToast({
					icon: 'none',
					title: '录音开始, 请开始说话'
				})
			}
			this.manager.onStop = (res) => {
				console.log("识别结果", res.result.replace(/(。|，)/g, ''))
				this.ironName = res.result.replace(/(。|，)/g, '')
				uni.showToast({
					icon: 'none',
					title: '录音结束'
				})
			}
			this.manager.onError = function(res) {
				console.error("error msg", res.msg)
			}
		},
		// #endif
		startRecord () {
			this.manager.start()
		},
		stopRecord () {
			console.log('watch', this.manager)
			this.manager.stop()
		},
		async searchIron() {
			if (!this.ironName) {
				uni.showToast({
					icon: 'none',
					title: '输入不能为空'
				})
				return
			}
			try {
				const result = await checkText(this.ironName)
				this.goToDetails(this.ironName)
			} catch (e) {
				uni.showToast({
					icon: 'none',
					title: e.message
				})
			}
		},
		async getIronData() {
			searchFind(this.ironName).then(res => {
				this.listData = res.data
			})
		},
		goToDetails(name) {
			try {
				let hot = uni.getStorageSync('hot')
				if(hot) {
					let arr = JSON.parse(hot)
					arr.length > 5 ? arr.shift() : ''
					arr.push(name)
					uni.setStorage({
						key: 'hot',
						data: JSON.stringify(arr)
					});
				} else {
					let arr = []
					arr.push(name)
					uni.setStorage({
						key: 'hot',
						data: JSON.stringify(arr)
					});
				}
				
				uni.setStorageSync('ironName', name);
			} catch (e) {
				// error
			}
			uni.switchTab({
				url: '/pages/index/index'
			});
		}
	},
	watch: {
		ironName: {
			handler: function() {
				this.getIronData()
			}
		}
	}
}
</script>

<style lang="scss">
.header {
	background: transparent;
}
.wave-gif {
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
	z-index: 99;
	mix-blend-mode: screen;  
	height: 100upx;
}
.the-search {
	position: relative;
	display: flex;
	justify-content: center;
	height:100rpx;
	padding:30rpx 24rpx 44rpx;
	background-color:#000131;
	background-repeat: no-repeat;
	background-position-y:39px;
}
.the-search .search-input {
	margin-right:20rpx;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	height: 74upx;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	outline: none;
	border-radius: 18upx;
	border: none;
	font-size: 28upx;
	color: #323232;
	background-color: #fff;
	/* #ifndef MP-ALIPAY */
	padding-left: 126upx;
	background-image: url();
	background-repeat: no-repeat;
	background-size:54upx 50upx;
	background-position:55upx 13upx;
	/* #endif */
}
.the-search .search-btn {
	font-size:14px;
	background:#fff;
	border-radius: 18upx;
	height: 74upx;
}
.content {
	position: relative;
	.hot {
		.title {
			font-size: 28upx;
			padding:20px;
			padding-bottom: 0;
		}
		.history {
			margin: 20upx;
			.history-item {
				display:inline-block;
				font-size:28upx;
				padding:6upx 20upx;
				border-radius:200upx;
				border:1upx solid #5ee1c6;
				margin:5upx 10upx;
			}
		}
	}
	.list {
		margin-top:40rpx;
		.list-item {
			padding:24rpx;
			border-top:1px solid #dfdfdf;
		}
	}
}

.voice-block {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 40rpx;
	margin: auto;
	width: 140upx;
	height: 140upx;
	line-height: 140upx;
	border-radius: 50%;
	border: 1upx solid #6a7cff;
	background: #FFFFFF;
	&.pause {
		border: 1upx solid #d81e06;
	}
	.voice-icon {
		width: 80upx;
		height: 100%;
		margin: 0 auto;
		background-image: url();
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}
}
.voice-block-hover {
	background: #ddd;
}
</style>